<template>
	<view>
		<view v-for="(item,index) in list" :key="index" class=" lists shadow" @click="go(item)">

			<view class="u-flex u-row-between u-padding-bottom-20 u-border-bottom u-font-weight u-font-lg">
				<view>
					<text>萌萌安家</text>
				    <text class="$u-type-error u-margin-left-10 u-font-xs">[{{$orderType(item.orderType)}}]</text> 
				</view>
				<view style="color: #007AFF;">{{$bookStatus(item.status,item.state)}}</view>
			</view>

			<view class="u-flex u-padding-top-20 u-border-bottom u-padding-bottom-20" v-for="(item1,index1) in item.goods" :key="item.id">
				<view style="position: relative;">
					<u-image :src="item1.cover" width="150" height="150"></u-image>
				</view>
				<view class="u-flex-1 u-margin-left-20 ">
					<view class="u-font-weight u-font-md u-line-2">{{item1.goodsName}}</view>
					<view class="u-margin-top-20 u-margin-bottom-20 $u-type-info ">{{item1.spec}}
					</view>
					<view class="u-flex u-row-between u-col-center">
						<view style="color: #333;font-size:24rpx;">￥{{item1.price}}</view>
						<view style="color: #333;font-size:24rpx;">x{{item1.num}}</view>
					</view>
				</view>
			</view>
			<slot name="btn" :item="item"></slot>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
			},
			row: {
				type: Boolean,
				default: false
			}

		},
		data() {
			return {

			}
		},
		created() {
			console.log(this.list, 77)
		},
		methods: {

			go(item) {
				this.$emit("go", item)
			}

		}
	}
</script>

<style>
	.lists {
		background: #fff;
		padding: 20rpx;
		border-radius: 20rpx;

		margin: 20rpx auto;
		width: 700rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		flex-flow: row-reverse;
	}
</style>
